<template>
   <div id="sy">
    <div class="Search">
         <input type="text" >
         <span>搜索</span>
     </div>

    <!-- 轮播图 -->
    <div class="Swiper">


<!-- <img src="../pic.png" alt=""> -->
</div>

    <!-- 列表 -->
    <div class="list">
           <div class="list-nav"> 
               <div class="nav" v-for="(item,index) in list" :key="index" @click="mysort(index)" :class="{active:currentIndex == index}" >{{item}}</div>
            </div>
        
          
                  <div class="block" v-for="(item,index) in Arr" :key="index">
                <div><img :src="item.picUrl" alt=""></div>
                <div class="weng">
                    <span>售价：{{item.wmPoiScore}}</span>
                    <span> {{item.name}}</span>
                   
                </div>
           
           </div>
         
    </div>

   </div>
</template>

<script>
import {shop_list} from '../utils/api'
// import axios from "axios"
export default {
    data() {
          return {
            currentIndex:0,
              Arr:[
                //   {pic:pic,value:350,title:"金马刀削面"},
                //   {pic:pic,value:200,title:"火锅"},
                //   {pic:pic,value:400,title:"烤肉"}
              ],
              list:["综合排序","距离最近","销量最高","筛选"],
             
          }
      },
    //   这个方法会在组件挂在完成时 自动执行 ，而且只执行一次
    // 发送网络请求，请求店铺列表
      mounted(){

        //  调用封装好的函数 发起ajax请求
        shop_list().then((res)=>{
            this.Arr = res.data.list;
              console.log(res)
        })




        //   发送不带参数的get请求
        //   axios.get('/api/shop/list').then((res)=>{
        //       this.Arr = res.data.list;
        //       console.log(res)
        //   })
        // 发送带参数的get请求
        // axios.get('/api/shop/search',{params:{searchkey:'火锅'}}).then((res)=>{
        //     console.log(res.data)
        // })


        // 发送带参数的post请求
        // axios.post('/api/user/login',{phone:'13611129070',pass:'1234'}).then((res)=>{
        //     console.log(res)
        // })
      },
       methods: {
               
                  mysort(index){
                        if(index == 3){
                            this.Arr.sort((a,b)=>{
                                return a.wmPoiScore - b.wmPoiScore
                            })
                        }
                  
             },
        
                 
     },
}
</script>

<style>
    *{
          margin: 0;
          padding: 0;
      }
      .Search{
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-top: 10px;
      }
      .Search input{
          width: 70%;
          height: 30px;
          border-radius: 10px;
          background-color: #f5f5f5;
          border: none;
          outline: none;

          
      } 
      .Search span{
          display: inline-block;
          height: 30px;
          background-color: aquamarine;
          border-radius: 5px;
          color: #c4c1c1;
      }
      .Swiper{
          width: 90%;
          height: 100px;
          background-image: url(../pic.png);
          background-size: contain;
          margin-left: 19px;
          margin: 10px 19px;
      }

      .list-nav{
       width: 100%;
       height: 30px;
       display: flex;
       /* justify-content: center; */
       justify-content: space-around;
   }
   .nav{
       height: 30px;
   }

   .block{
       width: 90%;
       height: 100px;
       display: flex;
       /* margin-top: 20px; */
       padding: 20px 0;
       margin-left: 20px;
       box-sizing: border-box;
       /* justify-content: center; */
   }
   .block img{
       width: 100px;
   }
   .weng{
       margin-left: 20px;
   }
   .weng span{
       display: block;
       /* flex-direction: row; */
   }
   .weng span:last-child{
       /* margin-top: 60px; */
       color: rgb(212, 160, 95);
   }
   .list .nav{
       padding: 10px;
       /* margin: 4px 5px; */
       text-align: center;
       color: #999;

   }

   .active{
       color: red;
   }
</style>